<?php ?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>prova</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="backgroundfader.js"></script>
<script type="text/javascript">
//jQuery.noConflict();

//jQuery('#back').append('<p><button id="go" onClick="change()">Run »</button></p>');



    function change(){
        
        
        
        
//        jQuery('#backRotator').css("background-image", "url()").animate({
//            opacity: 0
//            }, { 
//                duration: "slow", 
//                step : function(now, fx){ 
//                  jQuery('#backRotator').css("background-image", "url(http://localhost:8888/joomla_prog_cosacucini/images/stories/CONTATTI.png)").animate({
//                    opacity: 1
//                    }, { duration: "slow" });  
//                }
//        });
                
        jQuery('#divImg').fadeOut(1200,function(){
                jQuery('#divImg').css("background-image", "url(http://localhost.nb/joomla_prog_cosacucini/images/stories/CONTATTI.png)");
                jQuery('#divImg').fadeIn(1200);
        });
    
    }

</script>
        <style type="text/css">

            .backStyle {
                width: 100%;
                height: 300px;
                background-color: black;
                border-width: 1;
                border-color: red;
                border-style: solid;
                float: left;
                background-image: url("http://localhost.nb/joomla_prog_cosacucini/images/stories/CONTATTI.png");
/*                background-position: center;*/
            }
            .contenutoStyle {
                width: 80%;
                height: 200px;
/*                margin-top: 15%;*/
                position: absolute;
                z-index: 10px;
                text-align: center;
                background-color: green;
                border-width: 1;
                border-color: red;
                border-style: solid;
                float: left;
/*                background-position: center;*/
/*                margin: auto;*/

            }
            .blockStyle {
                width: 30%;
                height: 100px;
                margin: auto;

                text-align: center;

                background-color: blue;
                border-width: 1;
                border-color: red;
                border-style: solid;
                float: left;
/*                background-position: center;*/

            }
            .imgStyle{
                
                width: 100%;
                height: 100%;
                                float: left;
            }
        </style>
    </head>
    <body>

        <div id="back" class="backStyle">
<!--            <div style="width: 100%;"><button id="go" onClick="change()">Run »</button></div>-->
<!--            <div><button id="go" onClick="change()">Run »</button></div>
<!--            <div id="divImg" class=" imgStyle">-->
<!--                <img id="divImg" src="http://localhost.nb/joomla_prog_cosacucini/images/stories/CONTATTI.png"/>-->
<!--            </div>
-->            <p>dfkjsg</p>
            <div id="contenuto" class="contenutoStyle">
                <p>poipjui</p>
                <div id="block" class="blockStyle">
                    <p>3243</p>
                </div>
            </div>
        </div>

    </body>
</html>
